<template>
    <div class="container" :class="{is_fixed:isFixed}" >
        <div class="detail_header">
        <div class="header_left">
            {{title}}
            <!-- <a>小米 透明探索版 </a><span>|</span>
            <a>小米8 </a><span>|</span>
            <a>小米8 SE</a> -->
        </div>
        <div class="header_right">
            <router-link :to="{name:'ShopShow'}">概述 </router-link><span>|</span>
            <router-link :to="{name:'ShopDetail'}">参数 </router-link><span>|</span>
            <a href="javascript:;">用户评价</a>
            <!-- <button>立即购买</button> -->
            <slot name="buy"></slot>
        </div>
        </div>
    </div>

</template>

<script>
export default {
    props:{
        title:String
    },
    data(){
        return {
            isFixed:false
        }
    },
    mounted(){
        window.addEventListener('scroll',this.goTop)
    },
    methods:{
        goTop(){
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            this.isFixed = scrollTop > 175 ? true : false;
            // console.log(11);
        },
    }
}
</script>

<style lang="scss" scoped>
.container{
    width: 100%;
    border-top: 1px solid #e5e5e5;
    // position: sticky;    //吸顶有兼容性
    // top:0;
    // background-color: white;
}
.is_fixed{
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0 5px 5px #ccc;
    background-color: black;
    color: #ccc;
    z-index: 30; 
}
.detail_header{
    width: 1226px;
    height: 70px;
    line-height: 70px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;  
    color: #ccc;
    .header_left{
        font-size: 18px;
        font-weight: 700;
    }
    a{
        color:  #999999;
    }
    .header_right{
        font-size: 14px;
        span{
            padding-right: 10px;
            padding-left: 10px;
        }
    }
}
</style>>

</style>